<!DOCTYPE html>
<html>
<head lang="zh-cn">
    <meta charset="UTF-8">
    <title>控制多组图片切换</title>
</head>
<style>
    * { margin:0; padding:0;}
    body { font-family: "微软雅黑", "Microsoft Yahei", Arial, "黑体", sans-serif; font-size: 14px;}
    li { list-style:none;}
    a { text-decoration: none;}
    .slide { width: 300px; height: 200px; margin: 0 auto;position: relative; top:50px; border: 1px solid #000;}
    .slide span,.slide p{ position: absolute; left: 0; width: 300px; background-color: rgba(0,0,0,0.7); color: #fff; text-align: center; line-height: 30px; }
    .slide span { top: 0;}
    .slide p { bottom: 0;}
    .slide img { border: none; vertical-align: top;}
    .slide li { display: inline-block; width: 8px; height: 9px; background-color: #CCC; border-radius: 50%; cursor: pointer; margin: 0 2px;}
    .slide .min-img { position: absolute; top: -45px; left: 100px; display: none;}
    .slide .min-img img { width: 100px; height: 50px; border: 1px solid #333;}
    .slide .bg { background-color: #dc143c;}
    .slide .hover { display: block;}
    #back,#next { position: absolute;top: 10px; width: 100px; height: 30px; line-height: 30px; text-align: center; border: 1px solid #333; font-weight: 500; font-size: 20px; color: #000;}
    #back { left: 37%;}
    #next { left: 46%;}
</style>
<script>
    window.onload = function(){
        var oSlide = document.getElementById('slide');
        var oBack = document.getElementById('back');
        var oNext = document.getElementById('next');

        var aSpan = oSlide.getElementsByTagName('span')[0];
        var aSpa = oSlide.getElementsByTagName('span')[1];

        var aImg = oSlide.getElementsByTagName('img')[0];
        var aIm = oSlide.getElementsByTagName('img')[1];

        var aP = oSlide.getElementsByTagName('p')[0];
        var aP1 = oSlide.getElementsByTagName('p')[1];

        var arrUrl = ['pic/101.jpg','pic/102.jpg','pic/103.jpg','pic/104.jpg'];
        var arrUrl1 = ['pic/101.jpg','pic/102.jpg','pic/103.jpg'];
        var arrTxt = ['图片一','图片二','图片三','图片四'];
        var arrTxt1 = ['图片一','图片二','图片三'];
        var num = 0;
        var num1 = 0;

        //初始化数据。fn和fn1两个函数分别初始化两组图片。
        function fn(){
            aSpan.innerHTML = num + 1 + '/' + arrUrl.length;
            aImg.src = arrUrl[num];
            aP.innerHTML = arrTxt[num];
        }
        function fn1(){
            aSpa.innerHTML = num1 +1 + '/' + (arrUrl1.length);
            aIm.src = arrUrl1[num1];
            aP1.innerHTML = arrTxt1[num1];
        }
        fn();
        fn1();
        //Back按钮
        oBack.onclick = function(){
            //建立索引
            num--;
            num1--;
            if(num<0){
                //判断num的值，如果小于0则等于arrUrl数组的最后一个。
                num = arrUrl.length-1;
                //同时判断num1的值，如果小于0则等于arrUrl1数组的最后一个。
                if(num1<0){
                    num1 = arrUrl1.length-1;
                    fn1();
                }else{
                    //如果不小于0则执行函数fn1.
                    fn1();
                }
                fn();
                fn1();
            }else{
                //如果上面条件都不满足则执行下面的两个函数的同时判断num1的值是否小于0.
                if(num1<0){
                    num1 = arrUrl1.length-1;
                    fn1();
                }else{
                    fn1();
                }
                fn1();
                fn();
            }
        };
        //Next按钮
        oNext.onclick = function(){
            num++;
            num1++;
            if(num<arrUrl.length){
                fn();
                if(num1 < arrUrl1.length){
                    fn1();
                }else{
                    num1 = 0;
                    fn1();
                }
            // 当num和num1的值同时等于两个数组的长度时两个变量同时归零。
            }else if(num == arrUrl.length && num1 == arrUrl1.length){
                num = 0;
                num1 = 0;
                fn();
                fn1();
            }else{
                //num值大于数组arrUrl时num归零并且执行下面两个函数。
                num = 0;
                fn();
                fn1();
            }
        };
        //为两组图片加点击事件
        aImg.onclick = function(){
            num++;
            if(num<arrUrl.length){
                fn();
            }else{
                num = 0;
                fn();
            }

        };
        aIm.onclick = function(){
            num1++;
            if(num1<arrUrl1.length){
                fn1();
            }else{
                num1 = 0;
                fn1();
            }
        };

    }
</script>
<body>
    <div id="slide">
        <a href="javascript:" id="back">上一组</a>
        <a href="javascript:" id="next">下一组</a>
        <div class="slide">
            <span>数量正在加载……</span>
            <img src="" alt="" />
            <p>内容正在加载中……</p>
        </div>
        <div class="slide">
            <span>数量正在加载……</span>
            <img src="" alt="" />
            <p>内容正在加载中……</p>
        </div>
    </div>
</body>
</html>